<template>
	<el-row style="width: 100%; height: 100%;position: fixed;z-index:2;" ref="viewerContainer" class="demo-viewer">
		<vc-viewer :logo="false" @ready="ready">
			<vc-overlay-heatmap ref="heatmap" :data="nearbyData" :rectangle="rectangle" :max="maxValue" :min="minValue"
				:show="nearbyData" :options="options" @ready="onHeatmapReady" type="primitive">
			</vc-overlay-heatmap>
			<vc-overlay-html :position="{ lng: item.x, lat: item.y }"
				v-for="(item, index) in thermodynamicData.resultList" v-if="nearbyData">
				<div class="label-container label-container-var">
					<div class="label-animate-marker_border" @click="goPropertyLifeDetail(item.xmmc)">
						<div class="label-animate-marker_value">{{ item.num }}</div>
						<div class="label-animate-marker_value">{{ item.xmmc }}</div>
					</div>
				</div>
			</vc-overlay-html>
		</vc-viewer>
	</el-row>
</template>

<script setup>
import { ref, reactive, watchEffect, onMounted } from "vue";
import { useRouter } from "vue-router";
const thermodynamicData = ref(null)
const point1 = ref(null)
const router = useRouter();
const Cesiumshow = ref(true)
//四至参数
const rectangle = ref({
	west: 0,
	south: 0,
	east: 0,
	north: 0,
})
// 最大最小最新值
const minValue = ref(0)
const maxValue = ref(0)
// 热力图参数
const options = reactive({
	backgroundColor: 'rgba(0,0,0,0)',
	gradient: {
		0: '#F1BE4C', // 0-10
		1: '#FF0000' // 201-346
	},
	opacity: 0.8,
	radius: 3,
	maxOpacity: 0.6,
	minOpacity: 0.3,
	blur: 0.75
})

const segments = ref([])

const nearbyData = ref([]);
const heatmap = ref(null);
const show = true


//接收参数
const props = defineProps({
	thermodynamicData: {
		type: Object,
		default: () => { },
	},
});
watchEffect(() => {
	console.log(props.thermodynamicData)
	nearbyData.value = []
	thermodynamicData.value = props.thermodynamicData
	minValue.value = thermodynamicData.value.minValue
	maxValue.value = thermodynamicData.value.maxValue
	for (let i = 0; i < thermodynamicData.value.resultList.length; i++) {
		const data = thermodynamicData.value.resultList[i];
		nearbyData.value.push({ value: data.num, x: data.x, y: data.y })
	}

});

const ready = ({ Cesium, viewer }) => {

	rectangle.value.east = thermodynamicData.value.maxX
	rectangle.value.north = thermodynamicData.value.maxY
	rectangle.value.south = thermodynamicData.value.minY
	rectangle.value.west = thermodynamicData.value.minX
	// 去除水印
	viewer._cesiumWidget._creditContainer.style.display = "none";
	viewer.camera.setView({
		// 初始位置
		destination: Cesium.Cartesian3.fromDegrees(123.440092, 41.813635, 30000),
		orientation: {
			//相机角度
			heading: Cesium.Math.toRadians(0),
			pitch: Cesium.Math.toRadians(-90),
			roll: 0.0,
		},
	});
	//缩放大小限制
	viewer.scene.screenSpaceCameraController.maximumZoomDistance = 100000;
	viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
	viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
		Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
	);

	//加载离线地图
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: "http://192.168.30.225:8088/mapsatellite/{z}/{x}/{y}.jpg",
			fileExtension: "jpg",
		})
	);
};

//热力图
const onHeatmapReady = ({ Cesium, viewer, cesiumObject }) => {
	heatmap.value.childRef.value.creatingPromise.then(
		({ Cesium, viewer, cesiumObject }) => {
			if (cesiumObject instanceof Cesium.GroundPrimitive) {
			} else if (cesiumObject instanceof Cesium.Entity) {
			} else {
			}
		}
	);
}

//详情页
const goPropertyLifeDetail = (xmmc) => {
	router.push('propertyLifeDetail?xmmc=' + xmmc)
}

onMounted(() => {
});

</script>
<style lang="less">
.label-container {
	position: relative;
	z-index: 10;

	.label-animate-marker_border {
		color: #fff;
		font-size: 20px;
		text-align: center;
		position: relative;
		bottom: 120px;
		right: 50px;

	}

}

.label-containers {
	position: relative;
	z-index: 20;

	.thermalCircle {
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, rgba(241, 190, 76, 0.9) 100%);
		filter: blur(23px);
	}
}

.label-animate-marker_border {
	width: 100px;
	height: 120px;
	background: url('../../assets/img/propertyLife/point.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.label-animate-marker_value:first-child {
	font-size: 30px;
	padding-top: 10px;
	width: 100%;
	white-space: nowrap;
	/* 确保文本不换行 */
	overflow: hidden;
	/* 隐藏超出容器的内容 */
	text-overflow: ellipsis;
	/* 使用省略号显示被截断的文本 */
}

.label-animate-marker_value:last-child {
	margin-top: 5px;
	width: 100%;
	white-space: nowrap;
	/* 确保文本不换行 */
	overflow: hidden;
	/* 隐藏超出容器的内容 */
	text-overflow: ellipsis;
	/* 使用省略号显示被截断的文本 */
}

.label-animate-marker_value:hover {
	cursor: pointer;
}
</style>